﻿@model string
@using Masuit.MyBlogs.Core.Models.Entity

@{
    ViewBag.Title = "网站打赏";
    Layout = "~/Views/Shared/_Layout.cshtml";
    Random r = new Random();
    List<Advertisement> ads = ViewBag.Ads;
}
<style>
    .bg-title {
        height: 50vh;
        max-height: 400px;
        position: relative;
        background: url(/Content/images/@(r.Next(1, 9)).jpg) no-repeat center;
        background-size: cover;
        background-attachment: fixed;
    }
    .flex-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .flex-box>div{
        margin: 0 15px;
        width: 18%;
    }
    @@media only screen and (max-width: 1080px) {
        .flex-box>div{
            width: 29.8%;
        }
    }
</style>
<link href="~/Assets/jedate/jedate.css" rel="stylesheet" />
<script src="https://cdn.staticfile.org/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.7.7/angular.min.js"></script>
<script src="~/Scripts/tm.pagination.js"></script>
<script src="https://cdn.staticfile.org/ng-table/1.0.0/ng-table.js"></script>
<script src="~/Assets/jedate/jedate.js"></script>
<ol class="cd-breadcrumb triangle">
    <li><a asp-controller="Home" asp-action="Index">首页</a></li>
    <li class="current">
        <em>@ViewBag.Title</em>
    </li>
</ol>
<div class="bg-title">
    <div class="header-content text-center">
        <h1 class="size48">
            喜欢我的作品和文章？
        </h1>
        <div class="divider"></div>
        <p class="size24">
            您的捐助就是给我最大的鼓励
        </p>
    </div>
</div>
@Html.Raw(Model)
<div class="container-fluid" ng-app="myApp" ng-controller="home as list">
    <div class="page-header margin-clear">
        <h2 class="size24" style="display: inline">
            打赏名单(排名不分先后)：
        </h2>
        <button class="btn btn-info pull-right" ng-click="save()">添加打赏</button>
    </div>
    <table ng-table="list.tableParams" class="table table-bordered table-hover table-condensed margin-clear" ng-form="list.tableForm" disable-filter="list.isAdding" tracked-table="list.tableTracker">
        <tr ng-repeat="row in $data" ng-form="rowForm" tracked-table-row="row">
            <td title="'打赏时间'">
                {{row.DonateTime|date:'yyyy-MM-dd'}}
            </td>
            <td title="'昵称'">
                {{row.NickName}}
            </td>
            <td title="'金额'">
                {{row.Amount}}
            </td>
            <td title="'打赏方式'">
                {{row.Via}}
            </td>
            <td title="'Email'">
                {{row.Email}}
            </td>
            <td title="'QQ或微信'">
                {{row.QQorWechat}}
            </td>
            <td title="'操作'">
                <button class="btn btn-default btn-sm" ng-click="save(row)">编辑</button>
                <button class="btn btn-danger btn-sm" ng-click="list.del(row)">删除</button>
            </td>
        </tr>
    </table>
    <tm-pagination conf="paginationConf"></tm-pagination>
</div>
@if (ads.Count == 2)
{
    <div class="container-fluid">
        <div class="page-header margin-clear">
            <h2 class="size24" style="display: inline">
                推广支持：
            </h2>
        </div>
        <div class="row">
            <div class="col-md-6">
                @{
                    await Html.RenderPartialAsync("_ArticleListAdvertisement", ads[0]);
                }
            </div>
            <div class="col-md-6">
                @{
                    await Html.RenderPartialAsync("_ArticleListAdvertisement", ads[1]);
                }
            </div>
        </div>
    </div>
}
<script>
    var app = angular.module('myApp', ["ngTable", "tm.pagination"]);
    app.config(["$httpProvider", function ($httpProvider) {
        $httpProvider.defaults.transformRequest = function (obj) {
            var str = [];
            for (var p in obj) {
                if (obj.hasOwnProperty(p)) {
                    str.push(window.encodeURIComponent(p) + "=" + window.encodeURIComponent(obj[p]));
                }
            }
            return str.join("&");
        };

        $httpProvider.defaults.headers.post = {
            'Content-Type': 'application/x-www-form-urlencoded; charser=UTF-8'
        }
    }]);
    app.controller("home", ["$scope", "$http", "NgTableParams", function ($scope, $http, NgTableParams) {
        var self = this;
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 10,
            pagesLength: 15,
            perPageOptions: [10, 15, 20, 30, 50, 100],
            rememberPerPage: 'perPageItems',
            onChange: function () {
                window.loading();
                $http.post("/donate/getpagedata", {
                    page: $scope.paginationConf.currentPage,
                    size: $scope.paginationConf.itemsPerPage
                }).then(function (res) {
                    $scope.paginationConf.totalItems = res.data.TotalCount;
                    $("div[ng-table-pagination]").remove();
                    self.tableParams = new NgTableParams({
                        count: 50000
                    }, {
                        filterDelay: 0,
                        dataset: res.data.Data
                    });
                    window.loadingDone();
                });
            }
        };
        self.del = function (row) {
            swal({
                title: "确认删除这条打赏记录吗？",
                text: row.NickName,
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                showLoaderOnConfirm: true,
                animation: true,
                allowOutsideClick: false
            }).then(function () {
                $http.post("/donate/delete", {
                    id: row.Id
                }).then(function (res) {
                    window.notie.alert({
                        type: 1,
                        text: res.data.Message,
                        time: 4
                    });
                    _.remove(self.tableParams.settings().dataset, function (item) {
                        return row === item;
                    });
                    self.tableParams.reload().then(function (data) {
                        if (data.length === 0 && self.tableParams.total() > 0) {
                            self.tableParams.page(self.tableParams.page() - 1);
                            self.tableParams.reload();
                        }
                    });
                });
            }, function () {
            });
        }
        $scope.save = function (row) {
            if (row == null) {
                row = {
                    NickName: "",
                    DonateTime: "",
                    Amount: "",
                    Email: "",
                    QQorWechat: "",
                    Via: ""
                };
            }
            swal({
                title: '添加打赏记录',
                html:
                    '<div class="input-group"><span class="input-group-addon">昵称： </span><input type="text" id="name" class="form-control input-lg" placeholder="请输入昵称" value="' + row.NickName + '"></div>' +
                    '<div class="input-group"><span class="input-group-addon">打赏时间： </span><input id="date" type="text" class="form-control input-lg date datainp dateicon" readonly placeholder="请输入打赏时间" value="' + row.DonateTime + '"></div>	' +
                    '<div class="input-group"><span class="input-group-addon">打赏金额： </span><input id="amount" type="text" class="form-control input-lg" placeholder="请输入金额" value="' + row.Amount + '"></div>' +
                    '<div class="input-group"><span class="input-group-addon">打赏方式： </span><input id="via" type="text" class="form-control input-lg" placeholder="请输入打赏方式" value="' + row.Via + '"></div>' +
                    '<div class="input-group"><span class="input-group-addon">Email： </span><input type="email" id="email" class="form-control input-lg" placeholder="请输入Email" value="' + row.Email + '"></div>' +
                    '<div class="input-group"><span class="input-group-addon">QQ或微信： </span><input type="text" id="qq" class="form-control input-lg" placeholder="请输入QQ或微信" value="' + row.QQorWechat + '"></div>',
                showCloseButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                showLoaderOnConfirm: true,
                animation: true,
                allowOutsideClick: false,
                preConfirm: function () {
                    return new Promise(function (resolve, reject) {
                        row.NickName = $("#name").val();
                        row.DonateTime = $("#date").val();
                        row.Amount = $("#amount").val();
                        row.Via = $("#via").val();
                        row.Email = $("#email").val();
                        row.QQorWechat = $("#qq").val();
                        $http.post("/donate/save", row).then(function (res) {
                            if (res.data.Success) {
                                resolve(res.data);
                            } else {
                                reject(res.data.Message);
                            }
                        }, function (error) {
                            reject("服务请求失败！");
                        });
                    });
                }
            }).then(function (result) {
                if (result) {
                    if (result.Success) {
                        swal(result.Message, "", "success");
                        self.GetPageData($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
                    } else {
                        swal(result.Message, "", "error");
                    }
                }
            }).catch(swal.noop);

            jeDate(".date", {
                isinitVal: true,
                format: "YYYY-MM-DD",
                donefun: function (elem) {
                    $("#date").val(elem.val);
                }
            });
        }
    }]);
</script>